import React, { Dispatch, SetStateAction } from "react";
import { useState } from "react";
import styles from "@/styles/GetInput.module.sass";
import { FormProps, Spin, Segmented } from "antd";
import LocalForm from "@/components/Forms/LocalForm";
import RemoteForm from "@/components/Forms/RemoteForm";
import DirectoryForm from "@/components/Forms/DirectoryForm";
import VisFragment from "@/types/VisFragment";
import Loading from "@/components/Forms/Loading";

const GetInput = (props: {
  setData: Dispatch<
    SetStateAction<{ ifSuccessful: boolean; fragment: VisFragment }>
  >;
}) => {
  const formLayout: FormProps = {
    layout: "vertical",
    wrapperCol: { span: 20, offset: 2 },
    labelCol: { offset: 2 },
  };

  //state
  const [method, setMethod] = useState("本地仓库");
  const [spinning, setSpinning] = useState<boolean>(false);

  const { setData } = props;
  return (
    <main className={styles.main}>
      <div className={styles.logoBox}>ReVise</div>

      <div className={styles.modal}>
        <Spin
          spinning={spinning}
          indicator={<Loading />}
          style={{ minWidth: "100%" }}
        >
          <div className={styles.methodBox}>
            <Segmented
              size="large"
              defaultValue={method}
              options={["本地仓库", "远程仓库", "本地目录"]}
              onChange={(value) => {
                setMethod(value as string);
              }}
            />
          </div>
          <div className="formBox">
            {method === "本地仓库" && (
              <LocalForm
                formLayout={formLayout}
                setData={setData}
                setSpinning={setSpinning}
              />
            )}
            {method === "远程仓库" && (
              <RemoteForm
                formLayout={formLayout}
                setData={setData}
                setSpinning={setSpinning}
              />
            )}
            {method === "本地目录" && (
              <DirectoryForm
                formLayout={formLayout}
                setData={setData}
                setSpinning={setSpinning}
              />
            )}
          </div>
        </Spin>
      </div>
    </main>
  );
};

export default GetInput;
